import { NavBar, SearchBar } from 'antd-mobile'
import React, { useEffect, useState } from 'react'
import img from '../../assets/11111.png'
import { getListApi } from '../../api/request'
import { ProductCard, Tag, Button } from 'react-vant';
import { useNavigate } from 'react-router-dom';
function index() {
  const [list, setList] = useState([])
  const nav=useNavigate()
  const getkkk = () => {
    getListApi().then(res => {
      console.log(res)
      setList(res.data.data)
    })
  }
  useEffect(() => {
    getkkk()
  }, [])
  return (
    <div>
      <NavBar>景区门票</NavBar>
      <div style={{ display: 'flex', justifyContent: 'space-between' }}>
        <span>北京</span>
        <span><SearchBar></SearchBar></span>
        <button>搜索</button>
      </div>
      <div style={{ width: '100vw' }}>
        <img src={img} alt="" width={'100%'} height={'100px'} />
      </div>
      <div>
        <h4 style={{ marginLeft: '40%' }}>当季热门景区</h4>
        <div style={{ display: 'flex' }}>
          <div>
            <span>水立方</span>
            <img src={img} alt="" width={'100px'} height={'100px'} />
          </div>
          <div>
            <span>水立方</span>
            <img src={img} alt="" width={'100px'} height={'100px'} />
          </div>
          <div>
            <span>水立方</span>
            <img src={img} alt="" width={'100px'} height={'100px'} />
          </div>
        </div>
      </div>
      <div>
        <span onClick={()=>nav('/list')}>更多景区</span>
        {
          list.map(item => {
            return (
              // <div key={item.id}>
              //   <img src={item.image} alt="" width={'100px'} height={'100px'} />
              //   <span>{item.from}</span>
              // </div>
              <ProductCard
                key={item.id}
                num={item.id}
                price={item.data}
                desc={item.title}
                title={item.from}
                thumb={item.image}
              />
            )
          })
        }
      </div>
    </div>
  )
}

export default index